<template>
  <div class="collapse-item__title">
    <img
      class="item-title__index"
      :src="require(`@/assets/images/index_icon_0${props.index}.png`)"
      v-if="props.index"
    />
    <span class="item-title__text">
      {{ props.title }}
    </span>
    <template v-if="props.desc">
      <el-divider class="item-title__divider" direction="vertical"></el-divider>
      <span class="item-title__desc">{{ props.desc }}</span>
    </template>
  </div>
</template>

<script lang="ts" setup name="CollapseItemTitle">
import { defineProps } from 'vue';
interface CollapseItemTitleProps {
  /**
   * 标题
   */
  title: string;
  /**
   * 序号
   */
  index?: '1' | '2' | '3';
  /**
   * 描述
   */
  desc?: string;
}
const props = defineProps<CollapseItemTitleProps>();
</script>

<style lang="scss" scoped>
.collapse-item__title {
  display: flex;
  align-items: center;
  height: 56px;
  .item-title__index {
    margin-right: 6px;
    width: 16px;
    height: 16px;
  }
  .item-title__text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0a1f33;
    line-height: 22px;
  }
  .item-title__divider {
    height: 12px;
    border-color: #ebeff2;
  }
  .item-title__desc {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
}
</style>
